<template>
	<view class="container">
		<view class="bg bg-color-base margin-b20"></view>
		<view class="tab vs-row vs-align-center">
			<view class="vs-row vs-align-center">
				<view class="vs-column vs-align-center margin-r40" @click="cur = 0">
					<text class="font-46 margin-b20" :class="[cur ? 'color-black-3' : 'color-base font-50']">验证码</text>
					<view class="line bg-color-base" v-if="!cur"></view>
				</view>
				<view class="vs-column vs-align-center" @click="cur = 1">
					<text class="font-46 margin-b20" :class="[cur ? 'color-base font-50' : 'color-black-3']">密码</text>
					<view class="line bg-color-base" v-if="cur"></view>
				</view>
			</view>
		</view>

		<view class="login margin-b80" v-if="!cur">
			<view class="input vs-row vs-align-center margin-b40">
				<i class="input-icon margin-r20 iconfont mt-10 font-30 color-base icon-shoujihao1"></i>
				<input class="vs-flex-item color-base font-30" type="number" v-model="phone" :maxlength="11"
					placeholder="请输入您的手机号" placeholder-style="color: #999" clearable />
			</view>
			<view class="input vs-row vs-align-center margin-b40">
				<i class="input-icon margin-r20 iconfont mt-10 font-30 color-base icon-yanzhengma"></i>
				<input class="vs-flex-item color-base font-30" type="number" v-model="code" placeholder="请输入验证码"
					maxlength="4" placeholder-style="color: #999" clearable />
				<button class="margin-r20" type="primary"
					style="height: 60rpx; font-size: 26rpx; background-color: #5064eb" :disabled="isSend"
					@click="sendMsg">
					{{ isSend ? `重新发送${second}` : "发送验证码" }}
				</button>
			</view>
		</view>
		<view class="register margin-b80" v-if="cur">
			<view class="input vs-row vs-align-center margin-b40">
				<i class="input-icon margin-r20 iconfont mt-10 font-30 color-base icon-shoujihao1"></i>
				<input class="vs-flex-item color-base font-30" type="number" v-model="phone" :maxlength="11"
					placeholder="请输入您的手机号" placeholder-style="color: #999" clearable />
			</view>
			<view class="input vs-row vs-align-center margin-b40">
				<i class="input-icon margin-r20 iconfont mt-10 font-30 color-base icon-mima"></i>
				<input class="vs-flex-item color-base font-30" type="text" :password="showPassWord" v-model="password"
					placeholder="请输入您的登录密码" placeholder-style="color: #999" clearable />
				<u-icon class="input-icon margin-r20 iconfont mt-10" size="30" color="#5064eb"
					@click="showPassWord = !showPassWord" :name="showPassWord ? 'eye-fill' : 'eye-off'"></u-icon>
			</view>
		</view>
		<view class="button bg-color-base vs-row vs-align-center vs-space-center margin-b20" @click="login">
			<text class="color-white font-34">立即登录</text>
		</view>
		<div class="notice">
			<checkbox-group @change="radioChange">
				<checkbox value="true" :checked="readAgreement" shape="circle">
					<div class="flex" @tap.stop>
						<span>我已阅读并同意</span>
						<span class="green" @click="toSecret('service')">《用户协议》</span>
						<span>和</span>
						<span class="green" @click="toSecret('privacy')">《隐私政策》</span>
					</div>
				</checkbox>
			</checkbox-group>
		</div>
		<view v-show="loading" class="loading">
			<u-loading-icon></u-loading-icon>
		</view>
		<u-toast ref="uToast1" />
	</view>
</template>

<script>
	import {
		sendCode,
		login
	} from "@/common/api/index";
	export default {
		name: "login",
		data() {
			return {
				cur: 0, //验证码还是密码
				isSend: false, //点击发送
				second: 60, // 倒计时
				phone: "18283378924", //手机号码
				password: "123456789", // 密码
				code: "8888", //短息验证
				secondTimer: null, //倒计时  计时器
				showPassWord: true, //显示或隐藏密码
				loading: false, // 登录按钮loading
				readAgreement: false, // 同意协议
			};
		},
		methods: {
			/*   发送短信验证     */
			async sendMsg() {
				if (!this.phone) {
					this.$refs.uToast1.show({
						message: "请输入手机号码",
						type: "error",
					});
				} else if (!/^1[3456789]\d{9}$/.test(this.phone)) {
					this.$refs.uToast1.show({
						message: "请输入正确的手机号码",
						type: "error",
					});
				}
				/*  假装这里是发送验证码  */
				let formData = {
					scene: "YZMDL",
					mobile: this.phone,
				};
				let res = await sendCode(formData);
				if (res.code === 1) {
					this.$refs.uToast1.show({
						message: res.msg,
						type: "success",
					});
					await this.secondCount();
				}
			},
			/*   倒计时开启     */
			secondCount() {
				this.isSend = true;
				this.secondTimer = setInterval(() => {
					this.second--;
					if (this.second < 1) {
						clearInterval(this.secondTimer);
						this.isSend = false;
						this.second = 60;
						this.secondTimer = null;
					}
				}, 1000);
			},
			/*   登录   */
			async login() {
				if (!this.readAgreement) {
					this.$refs.uToast1.show({
						message: "请先阅读并同意用户协议和隐私政策",
						type: "error",
						position: "top",
						duration: 1500,
					});
					return;
				}
				let formData = {
					account: this.phone,
					terminal: "6",
					scene: this.cur === 0 ? "2" : "1",
				};
				if (this.cur === 0) {
					formData.code = this.code;
				} else {
					formData.password = this.password;
				}
				let res = await login(formData);
				if (res.code == 1) {
					this.loading = true;
					this.$refs.uToast1.show({
						message: "登录成功",
						type: "success",
					});
					console.log(" loginRes==========>", res);
					uni.setStorageSync("token", res.data.token);
					uni.setStorageSync("userInfo", res.data);
					this.$store.commit("saveUserInfo", res.data);
					setTimeout(() => {
						if (res.data.has_password) {
							uni.switchTab({
								url: "/pages/index/index",
							});
						} else {
							uni.navigateTo({
								url: "/pages/setPassword/setPassword",
							});
						}
					}, 1000);
				} else {
					this.$refs.uToast1.show({
						message: res.msg,
						type: "error",
					});
				}
			},
			radioChange(e) {
				this.readAgreement = !this.readAgreement;
			},
			toSecret(value) {
				uni.navigateTo({
					url: `/pages/mine/secret/secret?name=${value}`,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.loading {
		height: 100vh;
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
	}

	.container {
		position: relative;
	}

	.bg {
		position: relative;
		width: 750rpx;
		height: 400rpx;
	}

	.tab {
		position: absolute;
		top: 250rpx;
		left: 20rpx;
		right: 20rpx;
		height: 150rpx;
		padding: 0 50rpx;
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;

		&-bg {
			position: absolute;
			top: -200rpx;
			right: -50rpx;
			width: 440rpx;
			height: 285rpx;
		}
	}

	.line {
		width: 25rpx;
		height: 7rpx;
	}

	.login,
	.register {
		padding: 0 60rpx;
	}

	.input {
		width: 580rpx;
		height: 90rpx;
		padding: 0 30rpx;
		background-color: rgba(80, 100, 235, 0.1);
		border-radius: 100rpx;

		&-icon {
			width: 30rpx;
			height: 38rpx;
		}

		&-placeholder {
			color: #22c903;
		}
	}

	.button {
		width: 630rpx;
		height: 90rpx;
		margin-left: 60rpx;
		border-radius: 100rpx;
	}

	.separator {
		height: 2rpx;
		margin: 0 30rpx;
		background-color: #f5f5f5;
	}

	.other {
		&-items {
			padding: 0 200rpx;
		}

		&-icon {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.mt-10 {
		margin-top: 10rpx;
	}

	// 下边距
	.margin-b5 {
		margin-bottom: 5rpx;
	}

	.margin-b10 {
		margin-bottom: 10rpx;
	}

	.margin-b15 {
		margin-bottom: 15rpx;
	}

	.margin-b20 {
		margin-bottom: 20rpx;
	}

	.margin-b25 {
		margin-bottom: 25rpx;
	}

	.margin-b30 {
		margin-bottom: 30rpx;
	}

	.margin-b40 {
		margin-bottom: 40rpx;
	}

	.margin-b60 {
		margin-bottom: 60rpx;
	}

	.margin-b80 {
		margin-bottom: 80rpx;
	}

	.margin-b100 {
		margin-bottom: 100rpx;
	}

	// 右边距
	.margin-r5 {
		margin-right: 5rpx;
	}

	.margin-r10 {
		margin-right: 10rpx;
	}

	.margin-r15 {
		margin-right: 15rpx;
	}

	.margin-r20 {
		margin-right: 20rpx;
	}

	.margin-r25 {
		margin-right: 25rpx;
	}

	.margin-r30 {
		margin-right: 30rpx;
	}

	.margin-r40 {
		margin-right: 40rpx;
	}

	.margin-r60 {
		margin-right: 60rpx;
	}

	// 字体大小
	.font-18 {
		font-style: normal;
		font-size: 18rpx;
		font-family: Droid Sans Fallback;
	}

	.font-20 {
		font-style: normal;
		font-size: 20rpx;
		font-family: Droid Sans Fallback;
	}

	.font-22 {
		font-style: normal;
		font-size: 22rpx;
		font-family: Droid Sans Fallback;
	}

	.font-24 {
		font-style: normal;
		font-size: 24rpx;
		font-family: Droid Sans Fallback;
	}

	.font-26 {
		font-style: normal;
		font-size: 26rpx;
		font-family: Droid Sans Fallback;
	}

	.font-28 {
		font-style: normal;
		font-size: 28rpx;
		font-family: Droid Sans Fallback;
	}

	.font-30 {
		font-style: normal;
		font-size: 30rpx;
		font-family: Droid Sans Fallback;
	}

	.font-32 {
		font-style: normal;
		font-size: 32rpx;
		font-family: Droid Sans Fallback;
	}

	.font-34 {
		font-style: normal;
		font-size: 34rpx;
		font-family: Droid Sans Fallback;
	}

	.font-36 {
		font-style: normal;
		font-size: 36rpx;
		font-family: Droid Sans Fallback;
	}

	.font-38 {
		font-style: normal;
		font-size: 38rpx;
		font-family: Droid Sans Fallback;
	}

	.font-40 {
		font-style: normal;
		font-size: 40rpx;
		font-family: Droid Sans Fallback;
	}

	.font-46 {
		font-style: normal;
		font-size: 46rpx;
		font-family: Droid Sans Fallback;
	}

	.font-50 {
		font-style: normal;
		font-size: 50rpx;
		font-family: Droid Sans Fallback;
	}

	.font-60 {
		font-style: normal;
		font-size: 60rpx;
		font-family: Droid Sans Fallback;
	}

	.font-80 {
		font-style: normal;
		font-size: 80rpx;
		font-family: Droid Sans Fallback;
	}

	// 字体对齐
	.text-left {
		text-align: left;
	}

	.text-center {
		text-align: center;
	}

	.text-right {
		text-align: right;
	}

	// color相关
	.color-white {
		color: #ffffff;
	}

	.color-red {
		color: #dc0000;
	}

	// 黑色色阶向下
	.color-black {
		color: #000;
	}

	.color-black-3 {
		color: #333;
	}

	.color-black-6 {
		color: #666;
	}

	.color-black-9 {
		color: #999;
	}

	// 字体宽度
	.font-weight-400 {
		font-weight: 400;
	}

	.font-weight-500 {
		font-weight: bold;
	}

	// 间隔
	.spacing-20 {
		width: 750rpx;
		height: 20rpx;
		background-color: #f8f8f8;
	}

	// 圆角
	.radius-10 {
		border-radius: 10rpx;
	}

	.radius-20 {
		border-radius: 20rpx;
	}

	.radius-30 {
		border-radius: 30rpx;
	}

	.radius-circle {
		border-radius: 50%;
	}

	.radius-height {
		border-radius: 10000px;
	}

	// flex相关
	.vs-flex-item {
		flex: 1;
	}

	.vs-space-between {
		justify-content: space-between;
	}

	.vs-space-around {
		justify-content: space-around;
	}

	.vs-space-center {
		justify-content: center;
	}

	.vs-space-end {
		justify-content: flex-end;
	}

	.vs-row {
		flex-direction: row;
	}

	.vs-column {
		flex-direction: column;
	}

	.vs-align-end {
		align-items: flex-end;
	}

	.vs-align-center {
		display: flex;
		align-items: center;
	}

	.vs-align-start {
		align-items: flex-start;
	}

	.vs-item-hover {
		background-color: rgba(0, 0, 0, 0.05);
	}

	.vs-btn-hover {
		opacity: 0.8;
	}

	.color-base {
		color: #5064eb;
	}

	.bg-color-base {
		background-color: #5064eb;
	}

	.notice {
		padding: 40rpx 20px 0;
		font-size: 30rpx;

		/deep/.uni-checkbox-input {
			border-radius: 50%;
		}

		.green {
			color: #5064eb;
		}
	}
</style>